<template>

	<!-- 好友申请表单 -->
	<view>
		<view class="applyInfo">
			<!-- 被添加人账号 -->
			<view class="item">
				<text class="name">账号：</text>
				<text class="content">{{addInfo.addUsername}}</text>
			</view>

			<!-- 被添加人名称 -->
			<view class="item">
				<text class="name">名称：</text>
				<text class="content">{{addInfo.addName}}</text>
			</view>

			<!-- 被添加人好友备注 -->
			<view class="item">
				<text class="name">好友备注:</text>
				<input class="content" :value="appliedRemark" @input="(e) => appliedRemark = e.detail.value" />
			</view>

			<!-- 本人描述 -->
			<view class="item">
				<text class="name">本人描述:</text>
				<input class="content" :value="proposerRemark" @input="(e) => proposerRemark = e.detail.value" />
			</view>
			<!-- 本人账号 -->
			<view class="item">
				<text class="name">本人账号：</text>
				<text class="content">{{ownInfo.username}}</text>
			</view>

			<button class="send" type="primary" @click="sendApply">发送</button>
		</view>

	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';

	// 获取token
	const token = uni.getStorageSync('token');
	//好友备注
	const appliedRemark = ref('')
	// 本人描述
	const proposerRemark = ref('')

	//个人信息
	const ownInfo = reactive({
		id: 0,
		name: '',
		username: ''

	})

	//发送好友申请
	const sendApply = async () => {
		console.log("###", appliedRemark.value);
		await uni.request({
			url: "http://192.168.1.200:8080/applyFriend/applyFriend",
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			},
			data: {
				// 本账号
				proposerId: ownInfo.id,
				proposerName: ownInfo.username,
				// 本人描述
				proposerRemark: proposerRemark.value,
				//null
				proposerReason: null,
				// id
				targetUser: addInfo.addId,
				// 好友备注
				appliedRemark: appliedRemark.value,
				// 本人描述
				applyRemark: proposerRemark.value,
				applyPass: 0
			}

		})

		uni.switchTab({
			url: "/pages/index/index"
		})
	}

	//添加人信息
	const addInfo = reactive({
		addId: 0,
		addUsername: '',
		addName: ''
	})
	onLoad(async (options) => {
		// 参数
		// console.log(options);
		//获取添加人的账号信息
		addInfo.addUsername = options.username;
		addInfo.addName = options.name;
		addInfo.addId = options.id
		// console.log(addInfo);

		// 获取账号本人信息
		const getOwnInfo = await uni.request({
			url: "http://192.168.1.200:8080/user/userInfo",
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			},
		})
		// console.log(getOwnInfo.data.data);
		// getOwnInfo.data.data还有friendRelation，表示与被添加人是否为好友

		const {
			id,
			name,
			username
		} = getOwnInfo.data.data
		ownInfo.id = id
		ownInfo.name = name
		ownInfo.username = username
		proposerRemark.value = ownInfo.name
		console.log(proposerRemark);

	})
</script>

<style lang="scss">
	.applyInfo {
		margin-top: 100rpx;

		.item {
			margin: 40rpx 20rpx;
		}

		input {
			display: inline-block;
			border: 1px solid black;
			border-radius: 10rpx;
		}

		.name {
			display: inline-block;
			width: 200rpx;

		}

		.content {
			padding-left: 16rpx;
		}

		.send {
			width: 60%;
			margin-top: 80rpx;
		}
	}

	.active {
		background-color: salmon;
		border: 1px solid skyblue;
	}
</style>